<template>
  <div class="month-card-detail">
    <head-top head-title="本月打卡统计" go-back="true"></head-top>
    <lay-overtime :earlyNum="earlyNum" :signNum="signNum" :lateNum="lateNum" :lackNum="lackNum" v-if="flag"></lay-overtime>
    <month-count :monthData="monthData" v-if="flag"></month-count>
  </div>
</template>

<script>
import monthCount from '../common/monthCount.vue'
import headTop from '../header/Header.vue'
import layOvertime from '../common/layOvertime.vue'
import {getDakaData} from '../../api/jianli.js'

export default {
  name: 'MonthCardDetail',
  data() {
    return {
      monthData: [],
      lackNum: '',
      lateNum: '',
      signNum: '',
      earlyNum: '',
      flag: false
    }
  },
  components: {
    monthCount,
    headTop,
    layOvertime
  },
  created() {
    this._getMonthDakaData()
  },
  methods: {
    _getMonthDakaData() {
      getDakaData('month', this.$route.params.id).then(res => {
        this.monthData = res.data.data
        this.lackNum = res.data.lackNum
        this.lateNum = res.data.lateNum
        this.signNum = res.data.signNum
        this.earlyNum = res.data.earlyNum
        this.flag = true
      })
    }
  }
}
</script>

<style lang="scss">
  .month-card-detail {
    padding-top: 40px;
  }
</style>
